<template>
  <div class="detail-container">
      <el-form :model="form" size="mini" label-width="100px" style="margin-top:20px" ref="form" :rules="rules">
          <el-form-item label="收款方" prop="receivingCustomerName">
              <el-input v-model="form.receivingCustomerName" style="width:130px"></el-input>
          </el-form-item>
          <el-form-item label="单据类型" prop="billType">
              <el-radio-group v-model="form.billType" @change="changeType">
                  <el-radio :label="0">发货单</el-radio>
                  <el-radio :label="1">入库单</el-radio>
                  <el-radio :label="2">其它单据</el-radio>
                  <el-radio :label="3">采购发货单</el-radio>
                  <el-radio :label="4">外贸发货单</el-radio>
              </el-radio-group>
            <div style="margin-top:10px;margin-bottom:0;" v-if="form.billType != 2">
                <el-button size="mini" type="primary" class="btn-add" @click="showDialogVisible">选择单据</el-button>
                <el-input v-model="form.deliverIdstr" type="hidden" style="width:0;height:0"></el-input>
            </div>
            <div class="goodsList" style="margin-top:10px;" v-if="form.billType != 2">
                <!--发货单-->
                <el-table ref="sendTable"
                         v-if="form.billType == 0 || form.billType == 3 || form.billType == 4"
                        :data="sendList"
                        style="width: 100%;font-size: 12px"
                        border>
                <el-table-column label="发货单号"  align="center" width="150">
                  <template slot-scope="scope">{{scope.row.deliverSn}}</template>
                </el-table-column>
                <el-table-column label="发货日期"  align="center" width="120">
                  <template slot-scope="scope">{{scope.row.shipTime}}</template>
                </el-table-column>
              <el-table-column label="客户名称">
                  <template slot-scope="scope">{{scope.row.customerName}}</template>
              </el-table-column>
              <el-table-column label="发货数量"  align="center">
                  <template slot-scope="scope">{{scope.row.goodsNumber}}</template>
              </el-table-column>
                <el-table-column label="实际运费"  align="center">
                  <template slot-scope="scope">{{scope.row.actualFreight}}</template>
                </el-table-column>
                <el-table-column label="司机运费"  align="center">
                  <template slot-scope="scope">{{scope.row.driverExpress}}</template>
                </el-table-column>
                  <el-table-column label="费用凭证"  align="center">
                      <template slot-scope="scope">
                          <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                      </template>
                  </el-table-column>
                  <el-table-column label="费用备注"  align="center">
                      <template slot-scope="scope">{{scope.row.expressRemark}}</template>
                  </el-table-column>
                  <el-table-column label="到货凭证"  align="center">
                      <template slot-scope="scope">
                          <img :src="item" v-for="item in scope.row.goodsReceipt" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                      </template>
                  </el-table-column>
                  <el-table-column label="到货备注"  align="center">
                      <template slot-scope="scope">{{scope.row.goodsReceiptRemark}}</template>
                  </el-table-column>
                <el-table-column label="操作"  align="center">
                  <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="mini"
                            @click="delOnly(scope.$index)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
                <!--数据列表 入库单-->
                <el-table
                        ref="sendTable"
                        v-if="form.billType == 1"
                        v-loading="listLoading"
                        :data="sendList"
                        border
                        style="width: 100%; margin-top: 20px">
                    <el-table-column
                            align="center"
                            label="入库单号"
                            width="150">
                        <template slot-scope="scope">
                            {{scope.row.entrySn}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="入库日期"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.createTime}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="供应商名称"
                            width="300"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.supplierName}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="fromCompany"
                            label="合同公司"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            label="数量"
                            width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.entryNum}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="100"
                            align="center"
                            label="业务员">
                        <template slot-scope="scope">
                            {{scope.row.userName}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="运费"
                            width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.freight}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="司机运费"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.driverFreight}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="收款人"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.payeeUsername}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="费用凭证"
                            width="300">
                        <template slot-scope="scope">
                            <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="报销状态"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.isFreightSettled == 1 ? '已报销' : '未报销'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  align="center">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    size="mini"
                                    @click="delOnly(scope.$index)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--数据列表 其它单据-->
                <el-table
                        ref="sendTable"
                        v-if="form.billType == 2"
                        v-loading="listLoading"
                        :data="sendList"
                        border
                        style="width: 100%; margin-top: 20px">
                    <el-table-column
                            align="center"
                            label="单据编号"
                            width="150">
                        <template slot-scope="scope">
                            {{scope.row.entrySn}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="日期"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.createTime}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="供应商"
                            width="150"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.supplierName}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="entryType"
                            label="出库类别"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            label="运费"
                            width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.freight}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="100"
                            align="center"
                            label="司机运费">
                        <template slot-scope="scope">
                            {{scope.row.driverFreight}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="收款人"
                            width="150"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.payeeUsername}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="费用凭证"
                            width="300">
                        <template slot-scope="scope">
                            <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="报销状态"
                            width="100">
                        <template slot-scope="scope">
                            {{scope.row.isFreightSettled == 0 ? '未报销' : '已报销'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  align="center">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    size="mini"
                                    @click="delOnly(scope.$index)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
              <div style="font-size:12px;color:#606266;margin-top:20px">
                 合计实际费用：{{ sendList | fifterActualFreight(form.billType)}}
                 <span style="padding-left:30px;">合计司机费用：{{ sendList | fifterDriverExpress(form.billType)}}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="上传凭证" prop="applyPicUrls" v-if="form.billType == 2">
              <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in form.applyPicUrls ">
                  <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
                  <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg(index)"></i>
              </div>
              <el-upload
                      class="avatar-uploader"
                      :data="uploadToken"
                      action="https://upload.qiniup.com"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          <el-form-item label="结算费用" prop="settlementAmount">
            <el-input v-model="form.settlementAmount" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="运费归属人" prop="belongUserId">
              <el-select v-model="form.belongUserId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="费用承担" v-if="form.billType == 2">
            <el-select v-model="form.freightUserId" filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款方式" prop="payType">
              <el-radio-group v-model="form.payType">
                <el-radio :label="1">银行汇款</el-radio>
                <el-radio :label="2">现金</el-radio>
                <el-radio :label="3">支付宝</el-radio>
                <el-radio :label="4">微信</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" style="width:400px;"></el-input>
          </el-form-item>
      </el-form>
    <div style="margin-top:40px;text-align: center">
      <el-button  style="width:150px;" type="primary" @click="handleConfirm" :loading="btnLoading2">提交</el-button>
<!--      <el-button  style="width:150px;"  @click="goBlack">返回</el-button>-->
    </div>

    <!--选择发货单-->
    <el-dialog
            title="选择单据"
            :visible.sync="dialogVisible2"
            width="900px">
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="关键字：">
          <el-input v-model="listQuery.keywords" placeholder="单据编号"></el-input>
        </el-form-item>
        <el-form-item label="牌号：">
          <el-select v-model="listQuery.kingGoodsId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in goodsList"
              :key="item.kingId"
              :label="item.goodsSn"
              :value="item.kingId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发货日期：">
          <el-date-picker
            v-model="listQuery.deliverDate"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
                  @click="handleSearchList()"
                  type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <div style="overflow: auto">
        <div v-if="form.billType == 0 || form.billType == 3 || form.billType == 4">
            <el-table ref="multipleTable"
                      row-key="deliverId"
                      :data="list"
                      style="width: 95%;font-size: 12px;margin:0 auto"
                      @selection-change="handleSelectionChange"
                      v-loading="listLoading"
                      border>
                    <el-table-column type="selection" :reserve-selection="true" width="60" align="center"></el-table-column>
                    <el-table-column label="发货单号" align="center"  width="150">
                        <template slot-scope="scope">
                            <el-link @click="toDetail(scope.row.deliverId)" type="primary" style="font-size:12px">
                                {{scope.row.deliverSn}}
                            </el-link>
                        </template>
                    </el-table-column>
                      <el-table-column label="销售单号" align="center" width="150">
                        <template slot-scope="scope">{{scope.row.orderSn}}</template>
                    </el-table-column>
                    <el-table-column label="客户名称" width="300">
                        <template slot-scope="scope">{{scope.row.customerName}}</template>
                    </el-table-column>
                    <el-table-column label="运费/吨" align="center" width="100">
                      <template slot-scope="scope">{{(scope.row.driverExpress/scope.row.goodsNumber).toFixed(2)}}</template>
                    </el-table-column>
                    <el-table-column label="司机费用" align="center" width="100">
                        <template slot-scope="scope">{{scope.row.driverExpress}}</template>
                    </el-table-column>
                    <el-table-column label="数量" align="center" width="100">
                      <template slot-scope="scope">{{scope.row.goodsNumber}}</template>
                    </el-table-column>
                    <el-table-column label="收款人"  align="center" width="300">
                        <template slot-scope="scope">{{scope.row.payeeUsername}}</template>
                    </el-table-column>
            </el-table>
        </div>
        <div v-if="form.billType == 1">
            <el-table ref="multipleTable"
                      row-key="entryId"
                      :data="list"
                      style="width: 95%;font-size: 12px;margin:0 auto"
                      @selection-change="handleSelectionChange"
                      v-loading="listLoading"
                      border>
                <el-table-column type="selection" :reserve-selection="true" width="60" align="center"></el-table-column>
                <el-table-column
                        align="center"
                        label="入库单号"
                        width="150">
                    <template slot-scope="scope">
                        {{scope.row.entrySn}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="入库日期"
                        width="100">
                    <template slot-scope="scope">
                        {{scope.row.createTime}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="供应商名称"
                        width="300"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.supplierName}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="fromCompany"
                        label="合同公司"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="数量"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.entryNum}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="业务员">
                    <template slot-scope="scope">
                        {{scope.row.userName}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="运费"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.freight}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="司机运费"
                        width="100">
                    <template slot-scope="scope">
                        {{scope.row.driverFreight}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="收款人"
                        width="100">
                    <template slot-scope="scope">
                        {{scope.row.payeeUsername}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="form.billType == 2">
            <el-table ref="multipleTable"
                      row-key="entryId"
                      :data="list"
                      style="width: 95%;font-size: 12px;margin:0 auto"
                      @selection-change="handleSelectionChange"
                      v-loading="listLoading"
                      border>
                <el-table-column type="selection" :reserve-selection="true" width="60" align="center"></el-table-column>
                <el-table-column
                        align="center"
                        label="单据编号"
                        width="150">
                    <template slot-scope="scope">
                        {{scope.row.entrySn}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="日期"
                        width="100">
                    <template slot-scope="scope">
                        {{scope.row.createTime}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="供应商"
                        width="120"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.supplierName}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="entryType"
                        label="出库类别"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="运费"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.freight}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="司机运费">
                    <template slot-scope="scope">
                        {{scope.row.driverFreight}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="收款人"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.payeeUsername}}
                    </template>
                </el-table-column>
            </el-table>
        </div>

      </div>
      <div style="margin-bottom:40px;">
        <div class="pagination-container">
          <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  layout="total, sizes,prev, pager, next,jumper"
                  :page-size="listQuery.pageSize"
                  :page-sizes="[10,15,20]"
                  :current-page.sync="listQuery.pageNum"
                  :total="total">
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2">确 定</el-button>
      </span>
    </el-dialog>

      <!--放大图片-->
      <el-dialog
              :visible.sync="dialogVisible4"
              width="800px">
          <img :src="fullSrc" style="width:100%;"/>
      </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import store from '@/store'
  import {createSettlement,showSettlement,getDeliverList,getCustomerSetting,getDrivers,otherEntryList,entryList,getQiniuToken,getOrderUsersList,orderGoodsList} from '@/api/partner'
  import {validateCommission} from '@/utils/validate';
  import "@/utils/jQuery.print"
  const defaultForm = {
    receivingCustomerName:'',
    settlementDate:'',
    payType:1,
    settlementAmount:'',
    sumAmount:'',
    deliverIds:[],
    remark:'',
    deliverIdstr:'',
    billType:0,
    settlementId:0,
    applyPicUrls:[],
    freightUserId:'',
    belongUserId:''

  };
  const defaultListQuery = {
    keywords:'',
    kingGoodsId:'',
    settlementState:2,
    isYunlianDeliver:1,
    pageNum: 1,
    pageSize: 10,
    isFreightSettled:0,
    deliverDate:[]
  }
  export default {
    name: "customerDetail",
    data(){
      const isvalidateCommission = (rule, value, callback) => {
        if (!validateCommission(parseFloat(value))) {
          callback(new Error('非负整数或小数'))
        } else if(value > 99999999){
          callback(new Error('最大值为99999999'))
        }else {
          callback()
        }
      };
      return{
        roles:store.getters.roles ? store.getters.roles : [],
        settlementId:this.$route.query.id,
        orderInfo:{},
        form:JSON.parse(JSON.stringify(defaultForm)),
        rules:{
          receivingCustomerName:[{required: true, trigger: 'change' ,message: '请选择收款方'}],
          settlementDate:[{required: true, trigger: 'blur' ,message: '请输入结算日期'}],
          deliverIdstr:[{required: true, trigger: 'change' ,message: '请选择发货单'}],
          settlementAmount:[{required: true, trigger: 'blur',validator: isvalidateCommission}],
          payType:[{required: true, trigger: 'blur' ,message: '请选择付款方式',}],
          billType:[{required: true, trigger: 'change' ,message: '请选择单据类型',}],
          applyPicUrls:[{required: true, trigger: 'change' ,message: '请上传到货凭证',}],
          belongUserId:[{required: true, trigger: 'change' ,message: '请选择运费归属人',}],
        },
        sendList:[],
        listQuery:Object.assign({}, defaultListQuery),
        list:[],
        total:0,
        dialogVisible2:false,
        listLoading:false,
        selectList:[],
        btnLoading2:false,
          shouKuanList:[],
          dialogVisible4:false,
          fullSrc:'',
          loading:false,
          options:[],
          uploadToken:{
              token:'',
          },
          imgDomain:'',
        userOptionList:[],
        goodsList:[]
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),
    },
    created() {
        if(this.settlementId){
            this.getPageInfo();
        }
        this.getCustomerSettingList();
        this.getUploadToken();
        this.getUserOptionList();
        orderGoodsList().then((res)=>{
          this.goodsList = res.list
        })
    },
    filters: {
      fifterActualFreight(val,billType){
          let sum = 0;
          if(billType == 0 || billType == 3 || billType == 4){
              val.forEach((el)=>{
                  let actualFreight = el.actualFreight && el.actualFreight!='' ? el.actualFreight : 0
                  sum = sum + parseFloat(actualFreight)
              })
          }else{
              val.forEach((el)=>{
                  let freight = el.freight && el.freight!='' ? el.freight : 0
                  sum = sum + parseFloat(freight)
              })
          }
          return sum.toFixed(2)
      },

      fifterDriverExpress(val,billType){
        let sum = 0;
          if(billType == 0 || billType == 3 || billType == 4){
              val.forEach((el)=>{
                  let driverExpress = el.driverExpress && el.driverExpress!='' ? el.driverExpress : 0
                  sum = sum + parseFloat(driverExpress)
              })
          }else{
              val.forEach((el)=>{
                  let driverFreight = el.driverFreight && el.driverFreight!='' ? el.driverFreight : 0
                  sum = sum + parseFloat(driverFreight)
              })
          }
        return sum.toFixed(2)
      },
    },
    methods:{
      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList().then((res)=>{
          this.userOptionList = res;
        })
      },

        //获取七牛TOKEN
        getUploadToken(){
            getQiniuToken().then((res)=>{
                this.uploadToken.token = res.token;
                this.imgDomain = res.domain
            })
        },
        //上传图片
        handleAvatarSuccess(res){

            this.form.applyPicUrls.push(this.imgDomain+res.key);
        },

        //删除图片
        delImg(index){
            this.form.applyPicUrls.splice(index,1)
        },

        //切换单据类型
        changeType(){
            this.sendList = [];
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                getDrivers({keywords:query}).then(response => {
                    this.options = response.list;
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                });
            } else {
                this.options = [];
            }
        },
        //查看发货单
        toDetail(deliverId){
            let routeData = this.$router.resolve({name:'deliverCon',query:{id:deliverId,type:'caiWu',}});
            window.open(routeData.href);
        },


        fullImg(src){
            this.dialogVisible4 = true;
            this.fullSrc = src;
        },

      handleConfirm(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.btnLoading2 = true;
            let data = {};
            data.settlementId = this.form.settlementId;
            data.payType = this.form.payType;
            // data.settlementDate = this.form.settlementDate;
            data.receivingCustomerName = this.form.receivingCustomerName;
            data.settlementAmount = this.form.settlementAmount;
            data.deliverIds = this.form.deliverIds;
            data.remark = this.form.remark;
            data.sumAmount = 0;
            data.billType = this.form.billType;
            data.belongUserId = this.form.belongUserId

            this.sendList.forEach((el)=>{
                if(this.form.billType == 0 || this.form.billType == 3 || this.form.billType == 4){
                    data.sumAmount =  data.sumAmount + parseFloat(el.driverExpress)
                }else if(this.form.billType == 1){
                    data.sumAmount =  data.sumAmount + parseFloat(el.driverFreight)
                }
            });
            data.sumAmount = data.sumAmount.toFixed(2);
            if(this.form.billType == 2){
                data.applyPicUrls = this.form.applyPicUrls;
                data.freightUserId =  this.form.freightUserId ;
            }
            createSettlement(data).then(()=>{
              this.btnLoading2 = false;
              this.$router.push({name:'deliverFreightSettlement'})
            }).catch(()=>{
              this.btnLoading2 = false;
            })
          }
        })
      },
      goBlack(){
        this.$router.go(-1)
      },


      //显示选择发货单弹窗
      showDialogVisible(){
        this.dialogVisible2 = true;
        this.listQuery =  Object.assign({}, defaultListQuery);
        this.listQuery.billType = this.form.billType;

        this.selectList = [];
        this.getList();
      },

      //关闭选择发货单弹窗
      handleClose2(){
        this.$refs.multipleTable.clearSelection();
        this.dialogVisible2 = false;

      },

      //搜索发货单列表
      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      /**
       *获取发货单列表
       **/
      getList() {
        this.listLoading = true;
        let listQuery = JSON.parse(JSON.stringify(this.listQuery));
          let fn;
          if(this.form.billType == 0 || this.form.billType == 3 || this.form.billType == 4){
              if(this.form.billType == 0){
                listQuery.isYunlianDeliver = 1
              }else if(this.form.billType == 3){
                listQuery.isYunlianDeliver = 0
              }else if(this.form.billType == 4) {
                listQuery.isYunlianDeliver = 99
              }
              fn = getDeliverList;
          }else if(this.form.billType == 1){
              fn = entryList
          }else if(this.form.billType == 2){
              fn = otherEntryList
          }
          fn(listQuery).then(response => {
              this.listLoading = false;
              this.list = response.list;
              this.total = response.count;
            });
      },

      //改变查看页数
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },

      //改变页码
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },

      //切换选择发货单
      handleSelectionChange(val){
        this.selectList = JSON.parse(JSON.stringify(val));
      },

      //添加发货单
      handleConfirm2(){
        if(this.selectList.length > 0){
          this.selectList.forEach((el)=>{
              if(this.form.billType != 0 && this.form.billType != 3 && this.form.billType != 4){
                  el.costVoucher = el.costVoucher != '' ? el.costVoucher.split(",") : [];
              }
            let i = this.sendList.findIndex((ee)=>{
                if(this.form.billType == 0 || this.form.billType == 3 || this.form.billType == 4){
                    return ee.deliverId == el.deliverId
                }else if(this.form.billType == 1){
                    return ee.entryId == el.entryId
                }else if(this.form.billType == 2){
                    return ee.entryId == el.entryId
                }
            });
            if( i == -1){
              this.sendList.push(el);
            }
          });
          this.handleClose2();
          this.cuntDeliverIds();
        }else{
          this.$message({
            message: '请选择要添加的单据',
            type: 'info',
            duration:1000
          });
        }
      },

      //单个删除发货单
      delOnly(index){
        this.sendList.splice(index,1);
        this.cuntDeliverIds();
      },
      cuntDeliverIds(){
        this.form.deliverIds = [];
        this.form.deliverIdstr = '';
        this.sendList.forEach((el)=>{
            if(this.form.billType == 0 || this.form.billType == 3 || this.form.billType == 4){
                this.form.deliverIds.push(el.deliverId)
            }else{
                this.form.deliverIds.push(el.entryId)
            }

        });
        this.form.deliverIdstr = this.form.deliverIds.join(",");
        console.log(this.form.deliverIdstr)
      },

      //获取合同详情
      getPageInfo(){
          this.loading = true;
          showSettlement({settlementId:this.settlementId}).then(res=>{
              this.form.receivingCustomerName = res.receivingCustomerName;
              this.form.settlementDate = res.settlementDate;
              this.form.payType = res.payType;
              this.form.settlementAmount = res.settlementAmount;
              this.form.remark = res.remark;
              this.form.billType = res.billType;
              this.sendList = res.deliverList;
              this.form.settlementId = this.settlementId;
              if(res.billType != 0 && res.billType != 3 && res.billType != 4){
                  this.sendList.forEach((el)=>{
                      el.costVoucher = el.costVoucher != '' ? el.costVoucher.split(",") : [];
                  })
              }
              this.cuntDeliverIds();
              this.loading = false;
          });
      },

        //获取客户配置
        getCustomerSettingList(){
            getCustomerSetting().then((res)=>{
                res.forEach((el)=>{
                    if(el.cdtCode == 'payee_type'){
                        this.shouKuanList = el.data
                    }
                });
            })
        },
    }
  }
</script>

<style  lang="scss">
    .avatar-uploader{
        margin-bottom:10px;
        display: inline-block;
        width:80px;
        height:80px;
        border:1px solid #DCDFE6;
        text-align: center;
        line-height: 80px;
    }
  .detail-container {
    width: 90%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
    .el-card__header{
      background: #f8f8f8;
      .kehu-name{
        display: inline-block;
        font-size:14px;
        vertical-align: middle;
      }
      .kehu-label{
        font-size:12px;
        vertical-align: middle;
        display: inline-block;
        margin-left:15px;
        color: #409eff;
        background: #ecf5ff;
        border: 1px solid #b3d8ff;
        height:24px;
        line-height: 24px;
        padding:0 10px;
        border-radius: 5px;
      }
      .kehu-info{
        text-align: right;
        font-size: 12px;
        color:#333;
        line-height: 20px;
        span{
          padding-left:16px;
        }
      }
    }
    .operate-container {
      background: #F2F6FC;
      height: 80px;
      margin: -20px -20px 0;
      line-height: 80px;
    }
  }
  .price-block{
    font-size:12px;
    line-height:30px;
    .lab{
      display: inline-block;
      width:100px;
      text-align: right;
    }
    .text{
      display: inline-block;
    }
  }
  #print-div{
    font-size:12px;
    .title{
      font-size:18px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
    }
    .paper-top{
      margin-top:20px;
      line-height: 30px;
    }
    .good-table{
      margin-top:20px;
      table{
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        td,th{
          font-weight: normal;
          border-right:1px solid #ddd;
          border-top:1px solid #ddd;
          padding:5px 10px;
          line-height: 22px;
        }
      }
    }
    .paper-bottom{
      margin-top:20px;
      line-height: 30px;
    }
  }
</style>
